<template>
	<view class="container">
		<u-sticky>
			<view class="navbar">
				<view class="center">我的</view>
			</view>
		</u-sticky>

		<view class="head">
			<view class="user_info">
				<u-avatar
					size="80"
					randomBgColor
					:src="
						userdata.avatar
							? userdata.avatar
							: 'https://wx.qlogo.cn/mmhead/5K48YNcpF3aunuqWwOEaJWYCkls0kIoHiaDhVXvT7ticSDwr7IeX3PiaUg7BHZicLe1qQ4qSGSvlQIA/0'
					"
				></u-avatar>
				<view class="name">
					<text>小程序用户 {{ vuex_user.data.nickname }}</text>
					<image class="vip" v-if="vuex_user.data.isvip" src="@/static/img/vip.svg" style="width: 40rpx" mode="widthFix" />
				</view>
			</view>
		</view>
		<!-- <view class="tabs">
			<view class="tabs-item" v-for="(item, index) in toolList" :key="index">
				<view class="icon">
					<u-icon :name="item.icon" size="20" />
				</view>
				<view class="text">
					{{ item.text }}
				</view>
			</view>
		</view> -->
		<u-sticky :offset-top="navbarHeight">
			<view class="tabs1"><u-tabs :list="tabs" @change="handleTabChange"></u-tabs></view>
		</u-sticky>
		<view class="tabs-contect">
			<view class="histroy_bar" v-if="activeTab == 0">
				<view class="audio-item" v-for="(item, index) in histroyList" :key="index" @click="handleHistoryClick(item)">
					<view class="image-wrapper">
						<image :src="item.coverImg" mode="aspectFill" />
					</view>
					<view class="audio-item-info">
						<view class="audio-item-title">{{ item.title }}</view>
						<view class="audio-item-desc">{{ item.album }} / {{ item.author }}</view>
						<view class="audio-item-foot">
							<view class="">
								<view class="icon-item" v-if="AccountInfo.miniProgram.envVersion == 'release'">
									<u-icon name="clock" size="14" />
									<text>{{ formatTime(item.duration) }}</text>
									<text style="color: orange">已播放{{ item.percent }}</text>
								</view>
							</view>
							<view class="del_box" @click.stop="handleDelHistory(item)">
								<u-icon name="close" size="14"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="histroy_bar" v-else-if="activeTab == 1">
				<view class="audio-item" v-for="(item, index) in collectList" :key="index" @click="handleCollectClick(item)">
					<view class="image-wrapper">
						<image :src="item.cover_url" mode="aspectFill" />
					</view>
					<view class="audio-item-info">
						<view class="audio-item-title">{{ item.title.split(' by ')[0].trim() }} | {{ item.author }}</view>
						<view class="audio-item-desc">{{ item.description }}</view>
						<view class="audio-item-foot">
							<view class="">
								<view class="icon-item">
									<u-icon name="play-right-fill" size="14" />
									<text>{{ item.views }}</text>
								</view>
							</view>
							<view class="del_box" @click.stop="handleDelCollect(item)">
								<u-icon name="close" size="14"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-cell-group :border="false">
			<u-cell isLink size="large" :icon="item.icon" :title="item.text" :url="item.path" v-for="(item, index) in toolList" :key="index"></u-cell>
			<u-cell size="large" icon="server-fill" title="联系客服">
				<view class="" slot="value">
					<u-button open-type="contact" type="success">点击联系客服</u-button>
				</view>
			</u-cell>
		</u-cell-group> -->
		<u-popup :show="showQr" mode="center" @tap="closePopup">
			<view class="qrBox">
				<view class="copy_bar">
					<view class="text">客服微信：{{ userdata.wxkf }}</view>
					<view class="btn" @tap.stop="copyKefu">复制</view>
				</view>
				<image :src="userdata.kfcode" mode="widthFix"></image>
				<button type="primary" open-type="contact">点击联系客服</button>
			</view>
		</u-popup>
		<tabbarVue :selectedTabbar="4" />
	</view>
</template>

<script>
import tabbarVue from '../../components/tabbar.vue';
export default {
	components: {
		tabbarVue
	},
	data() {
		return {
			userdata: {},
			toolList: [
				{
					icon: 'star-fill',
					text: '我的收藏',
					path: '/pages/list/collection',
					target: 'gopage'
				},
				// {
				// 	icon: 'shopping-cart-fill',
				// 	text: '购买记录',
				// 	path: '/pages/list/buy',
				// 	target: 'gopage'
				// },
				{
					icon: 'level',
					text: '会员中心',
					path: '/pages/user/vip',
					target: 'gopage'
				},
				{
					icon: 'list-dot',
					text: '历史收听',
					path: '/pages/list/history',
					target: 'gopage'
				},
				{
					icon: 'file-text-fill',
					text: '操作手册',
					path: '/pages/tool/article?keywords=help',
					target: 'gopage'
				},
				{
					icon: 'bookmark-fill',
					text: '关于我们',
					path: '/pages/tool/article?keywords=about',
					target: 'gopage'
				}
			],
			tabs: [{ name: '历史' }, { name: '收藏' }],
			activeTab: 0,
			histroyList: [],
			collectList: [],
			showQr: false,
			navbarHeight: 0,
			page: 1,
			AccountInfo: {}
		};
	},
	onShow() {
		this.getUserData();
		this.gethistroyList();
		this.getCollectList();
		// 计算 navbar 的实际高度
		const systemInfo = uni.getSystemInfoSync();
		const statusBarHeight = systemInfo.statusBarHeight;
		const navbarContentHeight = 44; // navbar 内容的高度，可能需要根据实际情况调整
		this.navbarHeight = statusBarHeight + navbarContentHeight;
		this.page = 1;
		this.histroyList = [];
		let AccountInfo = wx.getAccountInfoSync();
		this.AccountInfo = AccountInfo;
	},
	onReachBottom() {
		console.log('触发上拉加载');
		if (this.activeTab) {
			this.page++;
			this.gethistroyList();
		}
	},
	methods: {
		getUserData() {
			let PostData = {
				ac: 'getmyinfo'
			};
			uni.$u.http.post('', PostData).then((res) => {
				console.log('用户信息', res);
				this.$u.vuex('vuex_user.data', res);
			});
		},
		gethistroyList() {
			let PostData = {
				ac: 'gethistory',
				page: this.page
			};
			uni.$u.http.post('', PostData).then((res) => {
				let newList = res.list.map((item) => {
					return {
						id: item.id,
						title: item.title,
						album: item.album,
						author: item.author,
						coverImg: item.cover_url,
						mp3file_id: item.mp3file_id,
						is_finished: item.is_finished,
						part: item.part,
						listenTime: item.create_time,
						percent: (Math.ceil((item.play_position / item.play_duration) * 100) || 0) + '%',
						currentTime: item.play_position,
						duration: item.play_duration // 1000到10000之间的随机数
					};
				});
				this.histroyList = [...this.histroyList, ...newList];
				console.log('获取播放历史', newList);
			});
		},
		getCollectList() {
			let PostData = {
				ac: 'getcollect'
			};
			uni.$u.http.post('', PostData).then((res) => {
				this.collectList = res.list;
			});
		},
		handleTabChange(item) {
			this.activeTab = item.index;
		},
		handleToolClick(item) {
			console.log(item);
			if (item.target == 'gopage') {
				uni.$u.route({ url: item.path });
			} else if (item.target == 'showkf') {
				this.showPopup();
			}
		},
		showPopup() {
			this.showQr = true;
		},
		closePopup() {
			this.showQr = false;
		},
		copyKefu() {
			let that = this;
			wx.setClipboardData({
				data: that.userdata.wxkf,
				success: function (res) {
					wx.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
					that.closePopup();
				}
			});
		},
		handleEditUser() {
			uni.$u.route({ url: '/pages/user/edit' });
		},
		handleHistoryClick(item) {
			uni.navigateTo({
				url: `/pages/album/play?mp3file_id=${item.mp3file_id}`
			});
		},
		handleCollectClick(item) {
			uni.navigateTo({
				url: `/pages/album/detail?id=${item.id}`
			});
		},
		formatTime(seconds) {
			const min = Math.floor(seconds / 60);
			const sec = Math.floor(seconds % 60);
			return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
		},
		//删除选中项目
		handleDelHistory(item) {
			let that = this;
			uni.showModal({
				content: '确定删除该条历史记录?',
				success: (res) => {
					if (res.confirm) {
						let PostData = {
							ac: 'delhistory',
							id: item.id
						};
						uni.showLoading();
						uni.$u.http.post('', PostData).then((res) => {
							that.page = 1;
							that.histroyList = [];
							that.gethistroyList();
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							});
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		handleDelCollect(item) {
			let that = this;
			uni.showModal({
				content: '确定删除该条收藏记录?',
				success: (res) => {
					if (res.confirm) {
						let PostData = {
							ac: 'delcollect',
							id: item.id
						};
						uni.showLoading();
						uni.$u.http.post('', PostData).then((res) => {
							that.getCollectList();
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							});
						});
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
}
.navbar {
	padding-top: var(--status-bar-height);
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	width: 100%;
	height: 88rpx;
	z-index: 100;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
	.center {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		width: 400rpx;
	}
}

.head {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(#6de1b9, #60c28e);
	height: 300rpx;
	border-radius: 0 0 50% 50%/20px;
	.user_info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		color: #ffffff;
		font-size: 32rpx;
		.name {
			display: flex;
			align-items: flex-end;
			gap: 20rpx;
		}
		.vip {
			width: 50px;
		}
	}
}
.banner {
	width: 100%;
	overflow: hidden;
	border-radius: 10rpx;
	margin-top: 20rpx;
	image {
		width: 100%;
	}
}
.tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	gap: 20rpx;
	background-color: #fff; // 确保背景色
	.tabs-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		.text {
			color: grey;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
}
.tabs1 {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	padding: 0 40rpx;
	background-color: #fff; // 确保背景色
}
.tools_bar {
	margin: 70rpx;
	display: grid;
	gap: 40rpx;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 200rpx;
	.tool {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		.icon {
			width: 80rpx;
			height: 80rpx;
		}
		.text {
			color: #ffffff;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
	.bg1 {
		background-color: lightcoral;
	}
	.bg2 {
		background-color: steelblue;
	}
	.bg3 {
		background-color: burlywood;
	}
}
.qrBox {
	padding: 40rpx;
	.copy_bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.text {
			flex: 1;
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100px;
			padding: 5px 0;
			background-color: teal;
			color: white;
			border-radius: 10rpx;
		}
	}
}

.tabs-contect {
	padding: 40rpx 0 100rpx;
	background-color: #fff;
}
.histroy_bar {
	display: flex;
	flex-direction: column;
	gap: 40rpx;
	.audio-item {
		display: flex;
		padding: 0 40rpx;
		align-items: center;

		.image-wrapper {
			width: 120rpx;
			height: 120rpx;
			margin-right: 30rpx;
			flex-shrink: 0;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.audio-item-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.audio-item-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.4;
				max-height: 2.8em;
			}

			.audio-item-star {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}

			.audio-item-desc {
				display: inline-block;
				font-size: 20rpx;
				color: #999;
				line-height: 1.4;
				margin: 8rpx 0;
				width: fit-content;
				max-width: 80%;
				// background-color: #f5f5f5;
				// padding: 8rpx 10rpx;
				// border-radius: 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.audio-item-view {
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
			.audio-item-foot {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 10rpx;
				font-size: 24rpx;
				color: #999;
				.icon-item {
					display: flex;
					align-items: center;
					gap: 10rpx;
				}
				.del_box {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}
</style>